<template>
	<view>
		<!-- 显示区域 -->
		<view class="img_item">
			<view v-for="(item, index) in column1" :key="index" class="imgT" @tap="toDetails(item.id)">
				<image :src="url+item.src" :style="{ width: '100%', height: `${item.height}px` }"></image>
				<view class="itemR">
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="img_item">
			<view v-for="(item, index) in column2" :key="index" class="imgT" @tap="toDetails(item.id)">
				<image  :src="url+item.src" :style="{ width: '100%', height: `${item.height}px` }"></image>
				<view class="itemR">
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 隐藏区域   因为需要获取每个图片的 宽高    所以需要利用隐藏区域    通过 bindload 事件  获取每一个图片的宽高   -->
		<view style="display:none">
			<image v-for="(item, index) in imgArr" :key="index" :data-idx="item" :src="url+item.src" @load="e => imageLoad(e, item)"></image>
		</view>
	</view>
</template>
 
<script>
import config from '@/config'
export default {
	data() {
		return {
			url:config.baseUrl,
			endImg:"/uploads/web/end.png",
			imgWidth: 0, // 	图片的宽        （ 屏幕宽  *  0.48 ）
			loadingCount:0, //	需要再次加载图片的数量
			imgArr: [], //  	需要再次加载的图片数组
			column1: [], //  	第1列图片数组
			column2: [], //  	第2列图片数组
			column1Height: 0, //记录第1列图片数组高度总和
			column2Height: 0 //记录第2列图片数组高度总和
		};
	},
	props: { 
		list: {
			type: Array,
			default() {
				return [];
			}
		},
	},
	watch: {
		// 监听
		list: {
			handler(val) {
				this.imgArr = val
				this.loadingCount = val.length  
			},
			// 代表在wacth里声明了list这个方法之后立即先去执行handler方法
			immediate: true
			//设置deep: true 则可以监听到 list.name的变化 不设置是监听不到内部变化
			// deep: true,
		}
	},
	mounted() {
		uni.getSystemInfo({
			success: res => {
				console.log('获取手机宽高', res);
				this.imgWidth = res.windowWidth * 0.48; // 定义所有图片的宽 ( 屏幕宽  *  0.48 ）
			}
		});
	},
	methods: {
		/**
		 * 当图片载入完毕时触发   每加载一个隐藏区的图片都会触发一次
		 *
		 * 因为需要获取每个图片的 宽高    所以需要利用隐藏区域    通过 imageLoad(e) 事件中的 e 获取每一个图片的宽高
		 */
		imageLoad(e, item) {
			let oImgW = e.detail.width; //图片原始宽度
			let oImgH = e.detail.height; //图片原始高度

			let scale = this.imgWidth / oImgW; //比例计算  （ 当前图片缩放的比例   =  定义的图片宽度 / 图片原始宽度       ）
			let imgHeight = oImgH * scale; //自适应高度（ 当前图片的自适应高度  =   图片原始高度 * 当前图片缩放的比例  ）
			item.height = imgHeight; //图片的自适应高度赋予 图片对象

			if (this.column1Height <= this.column2Height) {
				//判断 列表1 的高度 如果 小于等于 列表2 就将当前的图片对象添加到列表1数组中
				this.column1Height += imgHeight; //每次将当前图片高度加上之前的 高度
				this.column1.push(item); //更新第1列图片数组
			} else {
				this.column2Height += imgHeight;
				this.column2.push(item); //更新第2列图片数组
			}
			this.loadingCount = this.loadingCount - 1; //当前需要再次加载图片的数量减1
			if (this.loadingCount == 0) {
				this.imgArr = []; //如果当前需要再次加载图片的数量为0 就将 需要加载的图片数组清空
			}
		},
		
		toDetails(id) {
			uni.navigateTo({
				url: '../news/show?id='+id,
			});
		},
	}
};
</script>

<style>
.img_item {
	width: 48%;
	margin: 1%;
	display: inline-block;
	vertical-align: top;
}

.itemR{
		width: 94%;
		font-size: 11px;
		padding: 5px;
		position: relative;
	}

.title{
		font-size: 24rpx;
		margin-bottom: 5px;
		font-weight: 300;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 这里是超出几行省略 */
		height: 65rpx;
	}
	
	.imgT{
		width: 100%;
		position: relative;
		display: inline-block;
	}
	
	.ztz{
		font-size: 20rpx;
		color: #fff;
		background: #698376;
		padding: 3px 0;
		width: 65px;
		text-align: center;
		/* display: inline-block; */
		border-radius: 3px;
		position: absolute;
		right: 0;
		bottom:0;
	}
	
	.end{
		font-size: 20rpx;
		color: #fff;
		background: #ababab;
		padding: 3px 0;
		width: 65px;
		text-align: center;
		/* display: inline-block; */
		border-radius: 3px;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	.yend{
		height: 100%;
		width: 100%;
		background: rgba(0,0,0,0.6);
		position: absolute;
		top: 0;
		text-align: center;
		line-height: 185px;
	}
	
	.bottomm{
		display: inline-block;
		width: 100%;
		position: relative;
	}
</style>
